<template>
	<view>
		<view class="container">
			<view class="image-container">
				<image src="https://ffa.firstui.cn/uploadfile/240729114525968.jpg" mode="widthFix"
					class="product-image"></image>
			</view>
			<view class="product-info">
				<view class="product-name">美味小饼</view>
				<view class="price-buy-container">
					<view class="product-price">¥28.'00'</view>
					<button class="buy-button" onTap="dingdan">购买</button>
				</view>
				<view>
					<ant-tag style="margin-right: 10px">标签</ant-tag>
					<ant-tag style="margin-right: 10px">标签</ant-tag>
					<ant-tag style="margin-right: 10px">标签</ant-tag>
				</view>
			</view>
			<view class="ratings">
				<text class="rating-text">评分</text>
				<text class="rating-value">4.7分</text>
			</view>
			<view class="store-info">
				<view class="info-item">
					<text>地址</text>
					<text>宝兴</text>
				</view>
				<view class="info-item">
					<text>配送</text>
					<text>24小时</text>
				</view>
				<text>标签</text>
				<text>商家</text>
			</view>
			<view class="info-item">
				<text style="font-size: 18px; font-weight: bold">评论</text>
				<text style="color: #65acff">查看更多（999+></text>
			</view>
		</view>

		<view class="review-item">
			<image src="https://ffa.firstui.cn/uploadfile/240729114525968.jpg" class="user-icon" />
			<view class="review-content">
				<view class="review-user">M28******2178</view>
				<view class="review-text">
					对于喜欢按摩或者看哥哥小朋友长见识的，还是值得前去的。按摩和清水游泳鱼，对孩子人其实蛮好玩，就是时间短了。室内场馆没进来几个，特别的没进去完毕，所长可以玩更明显。
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

	export default {

		data() {
			return {};
		},
		onLoad() {},
		methods: {
			dingdan() {
				uni.navigateTo({
					url: '../AI/AI'
				});
			}
		}
	};
</script>
<style>
	.container {
		height: 900px;
		margin: 0px auto;
		background-color: #ffffff;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.image-container {
		width: 100%;
		text-align: center;
	}

	.product-image {
		width: 100%;
		height: auto;
	}

	.product-info {
		background-color: #f2f2e0;
		padding: 10px;
	}

	.product-name {
		font-size: 18px;
		font-weight: bold;

		margin-bottom: 10px;
	}

	.price-buy-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.product-price {
		color: #ff0000;
		font-size: 28px;
	}

	.buy-button {
		background-color: #ff5000;
		color: white;
		padding: 3px 10px;
		border: none;
		width: 103px;
		border-radius: 5px;
	}

	.ratings {
		padding: 0 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.rating-text {
		font-size: 16px;
	}

	.rating-value {
		font-size: 16px;
		color: #ff9900;
	}

	.store-info {
		margin-top: 10px;
		padding: 0 16px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
	}

	.review-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 10px;
	}

	.user-icon {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin-right: 10px;
	}

	.review-content {
		flex: 1;
	}

	.review-user {
		font-weight: bold;
		margin-bottom: 5px;
	}

	.review-text {
		color: #666666;
	}
</style>